<template>
  <div class="index-container">
    <index-header />
    <div class="position-failed">
      <div class="occupation-box">
        <div class="occupation-item" v-for="item in 10">
        </div>
        <div class="loading"></div>
      </div>
    </div>
    <div class="failed-content" v-if="position === 'failed'">
      <img class="failed-img" src="https://fuss10.elemecdn.com/2/67/64f199059800f254c47e16495442bgif.gif" />
      <p class="failed-hint">输入地址后才能订餐哦！</p>
      <button class="choose-addr" @click="$router.push('/getposition')">手动选择地址</button>
    </div>
    <div v-if="position === 'success'">
      <index-nav />
      <div class="recommendation flex-row-sb-center">
        <div style="align-self: flex-start;">
          <p class="r-title"><strong>品质套餐</strong></p>
          <p class="r-des">搭配齐全吃得好</p>
          <a href="#" class="r-activite">立即抢购 ></a>
        </div>
        <img class="r-img" src="https://cube.elemecdn.com/e/ee/df43e7e53f6e1346c3fda0609f1d3png.png?x-oss-process=image/format,webp/resize,w_282,h_188,m_fixed" />
      </div>
      <div class="svip-box flex-row-sb-center" :style="svipStyle">
        <div class="svip-box-l">
          <img class="img_icon" :src="img_src" />
          <span class="svip-text ellipsis">超级会员 ·</span>
          <span class="svip-desc ellipsis">{{svip.more.title.text}}</span>
        </div>
        <a href="#" @click="$router.push('/buysvip')" class="svip_link ellipsis">{{svip.more.bonus_title.text}}<span class="iconfont icon-jiantou-elm"></span></a>
      </div>
      <index-footer />
    </div>

  </div>
</template>

<script>
import IndexHeader from '_c/index/IndexHeader.vue'
import IndexNav from '_c/index/IndexNav.vue'
import IndexFooter from '_c/index/IndexFooter.vue'
export default {
  name: 'index',
  data() {
    return {
      position: '',
      svip: {
        more: {
          title: {
            text: ''
          },
          bonus_title: {
            text: ''
          }
        }
      },
      svipStyle: {
        background: ''
      },
      img_src: ''
    }
  },
  components: {
    IndexHeader,
    IndexNav,
    IndexFooter
  },
  created() {
    const interval = setInterval(() => {
      let i = 0
      if(window.sessionStorage.getItem('position')) {
        this.position = window.sessionStorage.getItem('position')
        i++
      }
      if(window.sessionStorage.getItem('index-data')) {
        const { res } = JSON.parse(window.sessionStorage.getItem('index-data'))
        const entries = res[0].entries[0]
        this.svipStyle.background = 'url(https://cube.elemecdn.com/' + entries.background.substr(0, 1) + '/' + entries.background.substr(1, 2) + '/' + entries.background.substr(3) + '.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed) no-repeat center center / 100% 100%'
        this.img_src = 'https://cube.elemecdn.com/' + entries.image_hash.substr(0, 1) + '/' + entries.image_hash.substr(1, 2) + '/' + entries.image_hash.substr(3) + '.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed'
        window.sessionStorage.setItem('svip_img', this.img_src)
        const { title: { text: text1 }, bonus_title: { text: text2 } } = JSON.parse(entries.more)
        this.svip.more.title.text = text1
        this.svip.more.bonus_title.text = text2
        this.success = true
        i++
      }
      (i === 2) && clearInterval(interval)
    })

  },
  methods: {
  }
}
</script>

<style scoped lang="less">
  .index-container {
    margin-top: 0;
    background-color: #fff;
  }
  .position-failed {
    height: calc(100vh - 260px);
    background-color: #fff;
  }
  .occupation-box {
    display: flex;
    flex-wrap: wrap;
  }
  .occupation-item {
    position: relative;
    width: 20%;
    height: 160px;
    padding: 20px;
    box-sizing: border-box;
    &::before {
      content: '';
      position: absolute;
      height: 100px;
      width: 100px;
      left: 50%;
      top: 10px;
      transform: translateX(-50%);
      border-radius: 50%;
      background-color: #f4f4f4;
    }
    &::after {
      content: '';
      position: absolute;
      height: 25px;
      width: 40%;
      background-color: #f4f4f4;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .loading {
    height: 80px;
    width: 80px;
    position: absolute;
    top: 800px;
    left: 50%;
    border: 5px solid #00A9FF;
    border-radius: 50%;
    transform: translateX(-50%);
    animation: rotate .5s linear infinite;
    &::before {
      content: '';
      position: absolute;
      height: 150%;
      width: 100%;
      background-color: #fff;
      transform: rotate(40deg);
      left: 35px;
    }
    &::after {
      content: '';
      position: absolute;
      height: 100%;
      width: 100%;
      background-color: #fff;
      transform: rotate(45deg);
      left: -50px;
    }
  }
  .failed-content {
    height: calc(100vh - 260px);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .failed-img {
    width: 70%;
  }
  .failed-hint {
    font-size: 32px;
    color: #818181;
  }
  .choose-addr {
    padding: 15px 20px;
    background-color: #56D176;
    border: none;
    border-radius: 3px;
    font-size: 30px;
    color: #fff;
  }

  @keyframes rotate {
    100% {
      transform: translateX(-50%) rotate(360deg);
    }
  }

  .recommendation {
    width: 90%;
    margin: 0 auto;
    background-color: #f6f6f6;
  }
  .r-title {
    font-size: 32px;
    margin: 20px 10px 0;
  }
  .r-des {
    margin: 10px;
    font-size: 26px;
  }
  .r-activite {
    display: block;
    margin: 10px 10px 0;
    color: #b58c6e;
    font-size: 26px;
  }
  .r-img {
    width: 200px;
  }
  .svip-box {
    margin: 10px 0;
    padding: 25px;
    color: #664d3d;
  }
  .svip-box-l {
    display: flex;
    align-items: center;
  }
  .img_icon {
    height: 40px;
  }
  .svip-text {
    margin: 0 10px;
    font-size: 30px;
    font-weight: 600;
  }
  .svip-desc {
    font-size: 22px;
  }
  .svip_link {
    font-size: 22px;
  }
  .isLoginFalse {
    height: 100;
  }
</style>
